import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { Layout, Dropdown, Menu, Avatar } from 'antd';
import React from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

const { Header } = Layout;

function TopHeader(props) {
  const { username, role: { roleName } } = JSON.parse(localStorage.getItem('token'))
  const changeCollapsed = () => {
    props.change_Collapsed()
  }
  const menu = (
    <Menu>
      <Menu.Item key={55}>{roleName}</Menu.Item>
      <Menu.Item key={66} danger onClick={()=>{
        localStorage.removeItem("token")
        props.history.replace("/login")
      }}>退出</Menu.Item>
    </Menu>
  );

  return (
    <Header className="site-layout-background" style={{ padding: '0 16px' }}>
      {React.createElement(props.isCollapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
        className: 'trigger',
        onClick: changeCollapsed,
      })}

      <div style={{float: 'right'}}>
        <span style={{ marginRight: '10px' }}>欢迎<span style={{color: '#1890ff', margin: '0 5px'}}>{username}</span>回来</span>
        <Dropdown overlay={menu}>
          <Avatar size="large" icon={<UserOutlined />} />
        </Dropdown>
      </div>
    </Header>
  )
}

const mapStateToProps = ({CollapsedReducer: {isCollapsed}}) => {
  return {
    isCollapsed
  }
}
const mapDispatchToProps = {
  change_Collapsed() {
    return {
      type: 'change-Collapsed',
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(TopHeader))